<template>
  <view>
    <topbar>
		<view class="navbar" slot="content">
			<view class="navbar-left" @click="toGeo">
				<view class="">
					<u-icon name="map-fill" size="20"></u-icon>
				</view>
				<view class="navbar-left-text">{{location !== null ? location.address:'上海市'}}</view>
			</view>
			<view class="navbar-search" @click="toSearch">
				<u-search :animation="true" disabled bg-color="#ffffff"></u-search>
			</view>
		</view>
	</topbar>
	<!-- <view class="main-choose">
		<vgt-tab
			:list="goodsType"
			:scrollWrapStyle="scrollWrapStyle"
			:defaultChoseInd="defaultChoseInd" 
			:defaultChoseItem="defaultChoseItem"
			:itemStyleDefault="itemStyleDefault"></vgt-tab>
	</view> -->
	<view class="main-swiper">
		<u-swiper :list="list" type="image" keyName="image" height="350rpx" :autoplay="true" radius="20" circular @click="toSearchResult(2)"></u-swiper>
	</view>
	<view class="main-type">
		<scroll-view scroll-x="true" class="type-scroll" scroll-left="120">
			<view class="type-common" @click="toSearchResult(0)">
				<u-icon  label="宠物猫" size="60" space="8" name="../static/images/index/cat.png" label-pos="bottom"></u-icon>
			</view>
			<view class="type-common" @click="toSearchResult(1)">
				<u-icon  label="宠物狗" size="60" space="8" name="../static/images/index/dog.png" label-pos="bottom"></u-icon>
			</view>
			<view class="type-common" @click="toSearchResult(2)">
				<u-icon  label="宠物萌宠" size="60" space="8" name="../static/images/index/other.png" label-pos="bottom"></u-icon>
			</view>
			<view class="type-common" @click="toSearchResult(3)">
				<u-icon  label="猫粮" size="60" space="8" name="../static/images/index/catfood.png" label-pos="bottom"></u-icon>
			</view>
			<view class="type-common" @click="toSearchResult(4)">
				<u-icon  label="狗粮" size="60" space="8" name="../static/images/index/dogfood.png" label-pos="bottom"></u-icon>
			</view>
			<view class="type-common" @click="toSearchResult(5)">
				<u-icon  label="萌宠穿搭" size="60" space="8" name="../static/images/index/cloth.png" label-pos="bottom"></u-icon>
			</view>
			<view class="type-common" @click="toSearchResult(6)">
				<u-icon  label="萌宠玩具" size="60" space="8" name="../static/images/index/toy.png" label-pos="bottom"></u-icon>
			</view>
		</scroll-view>
	</view>
	<!-- <view class="main-discount">
		<liu-goods-swiper :listTitle="listTitle" :goodsList="goodsList" :imgWidth="192" :imgHeight="152" @onClick="chooseItem"></liu-goods-swiper>
	</view>
	<view class="main-goods">
		<zyflow :flowlist="flowlist"></zyflow>
	</view> -->
	<!-- 秒杀楼层 -->
	<scrollXGoods :dataList = "likeList"></scrollXGoods>
	<!-- 分类精选 -->
	<classifyChoose :dataList="classifyData"></classifyChoose>
	<!-- 猜你喜欢 -->
	<goodsList :dataList ="likeList"></goodsList>
	<u-loadmore :status="loadStatus" />
  </view>
</template>

<script>
  import {apiGetProductListInMain} from '@/api/product.js'
  import storage from '@/utils/storage.js'
  import constant from '@/utils/constant.js'
  export default {
  	data() {
  		return{
			classifyParams:{
				part1:{
					pageNum:1,
					pageSize:10,
					searchValue:'猫'
				},
				part2:{
					pageNum:1,
					pageSize:10,
					searchValue:'狗'
				},
				part3:{
					pageNum:1,
					pageSize:10,
					searchValue:'粮'
				}
			},
			likeParams:{
				pageNum:1,
				pageSize:10,
				searchValue:''
			},
			likeList:[],
			loadStatus:'loadmore', // 判断数据是否到底了
			classifyData:{
				part1:[],
				part2:[],
				part3:[]
			},
			location:{
				latitude:0,
				longitude:0,
				name:'',
				address:'',
			},
			list:[
				{
					image:'../static/images/index/swiper1.png',
					title:"宠物上心啦",
					type:'image'
				},
				{
					image:'../static/images/index/swiper2.png',
					title:"宠物上心啦",
					type:'image'
				}
			],
			searchType:['猫','狗','宠','猫粮','狗粮','衣','玩']
  	    }
  	},
	onLoad(){
		this.doGetClassifyData()
		this.doGetLikeList()
		this.location = JSON.parse(uni.getStorageSync(constant.location))
	},
	onReachBottom() {
		if(this.loadStatus !== 'nomore'){
			this.doGetLikeList()
		}
	},
    methods:{
		doGetClassifyData(){
			let data1 = JSON.parse(JSON.stringify(this.classifyParams.part1))
			apiGetProductListInMain(data1).then(res=>{
				this.classifyData.part1 = res.rows
			})
			let data2 = JSON.parse(JSON.stringify(this.classifyParams.part2))
			apiGetProductListInMain(data2).then(res=>{
				this.classifyData.part2 = res.rows
			})
			let data3 = JSON.parse(JSON.stringify(this.classifyParams.part3))
			apiGetProductListInMain(data3).then(res=>{
				this.classifyData.part3 = res.rows
			})
		},
		doGetLikeList(){
			this.loadStatus = 'loading'
			let data = JSON.parse(JSON.stringify(this.likeParams))
			apiGetProductListInMain(data).then(res=>{
				this.likeList = [...this.likeList,...res.rows]
				this.likeParams.pageNum += 1;
				if(res.rows.length < this.likeParams.pageSize){
					this.loadStatus = 'nomore'
				}
			})
		},
		toSearchResult(val){
			this.$tab.navigateTo(`/pages/product/list?searchValue=${this.searchType[val]}`)
		},
		toSearch(){
			this.$tab.navigateTo("/pages/search/index")
		},
		toGeo(){
			let _that = this
			uni.chooseLocation({
				keyword:"厦门市集美区",
				success:function(res) {
					_that.location.latitude = res.latitude
					_that.location.longitude = res.longitude
					// _that.location.name = res.name
					_that.location.address = res.address
					uni.setStorageSync(constant.location,JSON.stringify(_that.location))
				}
			})
		}
    }
  }

</script>

<style scoped lang="less">
	.navbar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.navbar-left{
		display: flex;
		padding: 10rpx 10rpx;
		align-items: center;
	}
	.navbar-left-text{
		padding-left: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 100%;
		height: 100%;
		-webkit-line-clamp: 1;
		width: 100rpx;
	}
	.navbar-search{
		width: calc(100% - 50px);
		padding: 10rpx 20rpx;
	}
	.main-swiper{
		padding: 30rpx 30rpx;
		height: 400rpx;
		width: 100%;
	}
	.main-type{
		padding: 20rpx 40rpx;
		width: 100%;
		height: 200rpx;
	}
	.type-scroll{
		white-space: nowrap;
	}
	.type-common{
		width: 160rpx;
		height: 170rpx;
		// padding-top: 20rpx;
		// border: 1px solid black;
		display: inline-block;
	}
	.type-icon{
		width: 70rpx;
		height: 70rpx;
	}
	
	::v-deep .u-icon__img{
		background-color: #9bc624;
		border-radius: 50rpx;
	}
	.simple{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background: linear-gradient(to bottom,yellow,#ffbf00);
	}
	.main-choose{
		width: 100%;
		min-height: 130rpx;
		position: ;
	}
	.main-discount{
		width: 100%;
		min-height: 200rpx;
	}
	.main-goods{
		width: 100%;
		min-height: 200rpx;
	}
	
</style>
